import React, { Component } from 'react';
import Counter from './components/Counter';
class App extends Component {
    state = {
        fontSize: 12,
        width: 100,
    }
    onChange1 = (val) => {
        this.setState({ fontSize: val })
    }
    onChange2 = (val) => {
        this.setState({ width: val })
    }
    render() {
        return (<div>
            <Counter step={2} min={1} max={100} value={this.state.fontSize} onChang={this.onChange1}></Counter>
            <Counter step={2} min={1} max={100} value={this.state.width} onChang={this.onChange2}></Counter>
            <div style={{
                border: "1px solid red",
                width: this.state.width,
                fontSize: this.state.fontSize,
            }}>
                字体大小：{this.state.fontSize}
                盒子宽度：{this.state.width}
            </div>
        </div>);
    }
}

export default App;

// 组件代码：
/*

import React, { Component } from 'react';
class Counter extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        num: this.props.value
    }
    方法
    setnum(val) {
        if (val < this.props.min) {
            val = this.props.min
            return
        }
        if (val > this.props.max) {
            val = this.props.max
            return
        }
        this.setState({ num: val }, () => {
            this.props.onChang(val)
        })

    }
    render() {
        return (
            <div>
                <button onClick={() => { this.setnum(this.state.num - this.props.step) }}>-</button>
                <input value={this.state.num} onChange={(e) => { this.setnum(Number(e.target.value)) }} />
                <button onClick={() => { this.setnum(this.state.num + this.props.step) }}>+</button>
            </div>
        );
    }
}

export default Counter;

props默认值
Counter.defaultProps = {
    value: 1,
    step: 1,
    min: -Infinity,
    max: Infinity,
    Infinity  常量：代表无穷
}

*/ 